<template>
  <div class="un-eseal-setter">
    <el-divider direction="horizontal" content-position="center">电子签章设置</el-divider>
    <el-form-item label="电子签章">
      <el-upload ref="upload" action="/infra/file/upload" :multiple="false" :show-file-list="true"
        accept="image/jpg" :http-request="submitUpload" :before-upload="beforeUpload"
        :on-remove="handleRemove">
        <el-button slot="trigger" size="small" type="primary">选择</el-button>
        <div slot="tip">只能上传图片文件，且不超过2M</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="距离右侧">
      <el-input placeholder="设置距离右侧距离" v-model="activeData.right" size="small" clearable
        type="number">
        <template slot="append">px</template>
      </el-input>
    </el-form-item>
    <el-form-item label="距离底侧">
      <el-input placeholder="设置距离底侧距离" v-model="activeData.bottom" size="small" clearable
        type="number">
        <template slot="append">px</template></el-input>
    </el-form-item>
  </div>
</template>

<script>

import { beforeUpload, submitUpload } from "./const";

export default {
  name: "UnEsealSetter",
  props: {
    activeData: Object,
  },
  data() {
    return {
      file: null,
      imageUrl: "",
    };
  },
  methods: {
    beforeUpload(file) {
      return beforeUpload(file);
    },
    submitUpload(option) {
      submitUpload(option).then((res) => {
        if (res.code === 0) {
          this.imageUrl = res.data || "";
          this.$set(this.activeData.__config__, "defaultValue", res.data || "");
        }
      });
    },
    handleUpload(e) {
      this.$refs.upload.submit();

      e.stopPropagation();
    },
    handleRemove() {
      this.$set(this.activeData.__config__, "defaultValue", "");
    },
  },
};
</script>

<style lang="scss">
.un-eseal-setter {
  .el-button {
    margin-right: 4px;
  }
}
</style>
